    <style include="shared-style cr-icons cr-nav-menu-item-style">
      :host {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        width: var(--side-bar-width);
      }

      div.separator {
        background-color: var(--separator-color);
        flex-shrink: 0;
        height: 1px;
        margin: 8px 0;
      }

      #clear-browsing-data {
        justify-content: space-between;
      }

      #clear-browsing-data .cr-icon {
        margin-inline-end: 20px;
      }

      iron-selector {
        background-color: transparent;
        color: var(--sidebar-unselected-color);
        display: flex;
        flex: 1;
        flex-direction: column;
        padding-top: 8px;
        user-select: none;
      }

      iron-selector > a {
        /* Ensure the focus outline appears correctly (crbug.com/655503). */
        align-items: center;
        box-sizing: border-box;
        color: inherit;
        cursor: pointer;
        display: flex;
        font-weight: 500;
        margin: 0 4px;
        min-height: 40px;
        padding-inline-start: 24px;
        position: relative;
        text-decoration: none;
      }

      iron-selector > a.iron-selected {
        color: var(--cr-link-color);
      }

      iron-selector > a[disabled] {
        opacity: 0.65;
        pointer-events: none;
      }

      #spacer {
        flex: 1;
      }

      #footer {
        color: var(--sidebar-footer-text-color);
        width: var(--side-bar-width);
      }

      managed-footnote {
        --managed-footnote-icon-padding: 12px;
        border: none;
        margin: 24px 0;
        padding-inline-end: 16px;
        padding-inline-start: 24px;
      }

      #google-account-footer {
        display: flex;
        margin: 24px 0;
        padding-inline-end: 16px;
        padding-inline-start: 24px;
      }

      #google-account-footer iron-icon {
        align-self: flex-start;
        flex-shrink: 0;
        height: 20px;
        padding-inline-end: 12px;
        width: 20px;
      }

      #google-account-footer > div {
        /* At large font sizes, prevents the text from wrapping weirdly. */
        overflow-x: hidden;
      }

      iron-icon {
        display: none;
      }

      :host-context([enable-branding-update]) iron-icon {
        display: block;
      }

      :host-context([enable-branding-update]) #clear-browsing-data {
        justify-content: normal;
      }

      :host-context([enable-branding-update]) #clear-browsing-data .cr-icon {
        margin-inline-end: 0;
        margin-inline-start: 9px;
      }

      :host-context([enable-branding-update]) #syncedTabs + .separator {
        display: none;
      }
    </style>

    <cr-menu-selector>
      <iron-selector id="menu" selected="{{selectedPage}}"
          selectable=".page-item" attr-for-selected="path"
          on-iron-activate="onSelectorActivate_" selected-attribute="selected">
        <a id="history" role="menuitem" class="page-item cr-nav-menu-item"
            href="[[getHistoryItemHref_(selectedTab, showHistoryClusters_)]]"
            path="[[getHistoryItemPath_(selectedTab, showHistoryClusters_)]]"
            on-click="onItemClick_">
          <iron-icon icon="cr:schedule"></iron-icon>
          $i18n{historyMenuItem}
          <paper-ripple></paper-ripple>
        </a>
        <a id="syncedTabs" role="menuitem" href="/syncedTabs"
            class="page-item cr-nav-menu-item"
            path="syncedTabs" on-click="onItemClick_">
          <iron-icon icon="cr:phonelink"></iron-icon>
          $i18n{openTabsMenuItem}
          <paper-ripple></paper-ripple>
        </a>
        <div class="separator"></div>
        <a role="menuitem" id="clear-browsing-data"
            class="cr-nav-menu-item"
            href="chrome://settings/clearBrowserData"
            on-click="onClearBrowsingDataTap_"
            disabled$="[[guestSession_]]"
            tabindex$="[[computeClearBrowsingDataTabIndex_(guestSession_)]]">
          <iron-icon icon="cr:delete"></iron-icon>
          $i18n{clearBrowsingData}
          <div class="cr-icon icon-external"></div>
          <paper-ripple id="cbd-ripple"></paper-ripple>
        </a>
        <!-- tabindex is needed below because <a> without href attribute is not
             focusable in sequential keyboard navigation by default. -->
        <a role="menuitem" id="toggle-history-clusters"
            class="cr-nav-menu-item"
            tabindex="0"
            on-click="onToggleHistoryClustersClick_"
            on-keydown="onToggleHistoryClustersKeydown_"
            on-mousedown="onToggleHistoryClustersMousedown_"
            hidden="[[!showToggleHistoryClusters_]]">
          <iron-icon icon="[[getToggleHistoryClustersItemIcon_(
              historyClustersVisible)]]">
          </iron-icon>
          [[getToggleHistoryClustersItemLabel_(historyClustersVisible)]]
          <paper-ripple id="thc-ripple"></paper-ripple>
        </a>
      </iron-selector>
    </cr-menu-selector>

    <div id="spacer"></div>
    <div id="footer" hidden="[[!showFooter_]]">
      <div class="separator"></div>
      <managed-footnote></managed-footnote>
      <div id="google-account-footer"
          hidden="[[!footerInfo.otherFormsOfHistory]]">
        <iron-icon icon="cr:info-outline"></iron-icon>
        <div>$i18nRaw{sidebarFooter}</div>
      </div>
    </div>
